<template>
  <div>
    <el-card>
      <el-row :gutter="20" style="margin-bottom:20px;">
        <el-col :span="1.5" style="margin-top: 4px">
          <el-button type="primary" @click="checkCoding" size="mini">压缩包上传</el-button>
          <a-upload name="file" :action="uploadUrl" accept=".zip" :multiple="true" :data="uploadData"
            @change="handleChange" :showUploadList="false"> <el-button hidden="true" type="primary" ref="uploadBtn"
              size="mini"></el-button> </a-upload>
        </el-col>
      </el-row>
      <el-table ref="tableName" :data="parameterList" height="500px" style="margin: 10px 0 10px" border
        :header-cell-style="{ background: '#FAFAFA' }">
        <el-table-column align="center" type="index"></el-table-column>
        <el-table-column align="center" label="数据来源" prop="fileName">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click.native.stop="downloadAttachment(scope.row)">{{ scope.row.fileName
            }}</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" label="上传时间" prop="time" sortable> </el-table-column>
        <el-table-column align="center" label="备注信息" prop="message" show-overflow-tooltip> </el-table-column>
        <el-table-column align="center" label="操作" fixed="right" width="80px">
          <!-- <el-table-column align="center" label="操作" fixed="right" width="150px"> -->
          <template slot-scope="scope">
            <el-popconfirm title="确定删除吗？" @confirm="deleteRow(scope.row)">
              <el-button slot="reference" type="text" size="mini">删除</el-button>
            </el-popconfirm>
            <!-- <el-divider direction="vertical"></el-divider>
            <el-button @click="downloadFile" style="color:black" type="text" size="mini">文件下载</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog title="选择编码类型" :visible.sync="codingVisible" width="30%" append-to-body>
      <div>
        <el-radio v-model="uploadData.code" label="GBK">GBK</el-radio>
        <el-radio v-model="uploadData.code" label="UTF8">UTF8</el-radio>
      </div>
      <div style="margin-top:10px;">
        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea"> </el-input>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="isCheck()" size="mini">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Message } from 'element-ui'
import { textarea } from '../../components/FormMaking/components/componentProperties'
export default {
  data() {
    return {
      uploadUrl: 'http://59.172.104.174:30669/admin/uploadZip',
      uploadData: {
        code: 'UTF8',
        message: this.textarea
      },
      codingVisible: false,
      parameterList: [],
      textarea: ''
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    checkCoding() {
      this.codingVisible = true
    },
    isCheck() {
      this.codingVisible = false
      this.uploadData.message = this.textarea
      this.$refs['uploadBtn'].$el.click()
    },
    deleteRow(row) {
      this.axios({
        baseURL: 'http://59.172.104.174:30669',
        url: '/attachmentUpload/deleteAttachmentZip',
        method: 'GET',
        params: {
          filename: row.fileName,
          id: row.id
        }
      }).then(res => {
        if (res.data.code == 200) {
          Message({
            message: '删除成功！',
            type: 'success',
            center: true,
            customClass: 'mzindex'
          })
          this.loadData()
        } else {
          Message({
            message: '删除失败！',
            type: 'error',
            center: true,
            customClass: 'mzindex'
          })
        }
      })
    },
    handleChange(info) {
      if (info.file.status === 'done') {
        if (info.file.response.code == '201') {
          Message({
            message: '重新上传文件成功！',
            type: 'success',
            center: true,
            customClass: 'mzindex'
          })
          this.loadData()
        } else if (info.file.response.code == '500') {
          Message({
            message: '上传文件成功！',
            type: 'success',
            center: true,
            customClass: 'mzindex'
          })
          this.loadData()
        }
      }
    },
    downloadAttachment(row) {
      this.axios({
        baseURL: 'http://59.172.104.174:30669',
        url: '/attachmentUpload/downLoadAttachmentFile',
        method: 'GET',
        params: {
          filename: row.fileName,
          message: this.textarea
        },
        responseType: 'blob' // 表明返回服务器返回的数据类型
      }).then(res => {
        let blob = new Blob([res.data])
        let fileName = row.fileName
        if (window.navigator.msSaveOrOpenBlob) {
          navigator.msSaveBlob(blob, fileName)
        } else {
          var link = document.createElement('a')
          link.href = window.URL.createObjectURL(blob)
          link.download = fileName
          link.click()
          //释放内存
          window.URL.revokeObjectURL(link.href)
        }
      })
    },
    //获取基本参数
    loadData() {
      this.axios({
        baseURL: 'http://59.172.104.174:30669',
        url: '/attachmentUpload/getAttachmentFile',
        method: 'GET'
      }).then(res => {
        console.log(res.data.result);
        this.parameterList = res.data.result
      })
    },
  }
}
</script>

<style></style>
